/*
 * fluro
 * Created by Yakka
 * https://theyakka.com
 * 
 * Copyright (c) 2019 Yakka, LLC. All rights reserved.
 * See LICENSE for distribution and usage details.
 */

import 'package:fluro/fluro.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../components/log/log.dart';
import '../route/application.dart';

class HomeComponent extends StatefulWidget {
  const HomeComponent({Key? key}) : super(key: key);

  @override
  State createState() => HomeComponentState();
}

class HomeComponentState extends State<HomeComponent> {
  var _deepLinkOpacity = 1.0;
  final _deepLinkURL =
      'fluro://deeplink?path=/message&mesage=fluro%20rocks%21%21';
  final _daysOfWeek = const [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
    'Sunday'
  ];

  @override
  Widget build(BuildContext context) {
    var customTransition = (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      return ScaleTransition(
        scale: animation,
        child: RotationTransition(
          turns: animation,
          child: child,
        ),
      );
    };

    var menuWidgets = <Widget>[
      menuButton({
        'context': context,
        'icon': 'assets/images/ic_transform_native_hz.png',
        'title': 'Native Animation',
        'type': 'native',
        'route': '/demo',
        'message':
            'This screen should have appeared using the default flutter animation for the current OS',
        'theme': '#F76F00',
        'transition': TransitionType.native
      }),
      menuButton({
        'context': context,
        'icon': 'assets/images/ic_transform_fade_in_hz.png',
        'title': 'Preset (Fade In)',
        'type': 'preset-fade',
        'route': '/demo',
        'message': 'This screen should have appeared with a fade in transition',
        'theme': '#F700D2',
        'transition': TransitionType.fadeIn
      }),
      menuButton({
        'context': context,
        'icon': 'assets/images/ic_transform_global_hz.png',
        'title': 'Preset (Global transition)',
        'type': 'fixed-trans',
        'route': '/demo/fixedtrans',
        'message': 'Hello!',
        'theme': '#f4424b',
        'transition': TransitionType.inFromRight
      }),
      menuButton({
        'context': context,
        'icon': 'assets/images/ic_transform_custom_hz.png',
        'title': 'Custom Transition',
        'type': 'custom',
        'route': '/demo',
        'message':
            'This screen should have appeared with a crazy custom transition',
        'theme': '#DFF700',
        'transition': TransitionType.custom,
        'transitionBuilder': customTransition,
        'transitionDuration': const Duration(milliseconds: 600),
      }),
      menuButton({
        'context': context,
        'icon': 'assets/images/ic_result_hz.png',
        'title': 'Navigator Result',
        'type': 'pop-result',
        'route': '/demo',
        'message':
            'When you close this screen you should see the current day of the week',
        'theme': '#7d41f4',
        'transition': TransitionType.native,
        'result': 'Today is ${_daysOfWeek[DateTime.now().weekday - 1]}!'
      }),
      menuButton({
        'context': context,
        'icon': 'assets/images/ic_function_hz.png',
        'title': 'Function Call',
        'type': 'function-call',
        'route': '/demo/func',
        'message': 'You tapped the function button!',
        'theme': '#FFFFFF',
        'transition': TransitionType.native
      })
    ];

    final size = MediaQuery.of(context).size;
    final childRatio = (size.width / size.height) * 2.5;

    return Material(
      color: const Color(0xFF00D6F7),
      child: SafeArea(
        top: true,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            const Padding(
              padding: EdgeInsets.only(top: 25, bottom: 35, left: 25),
              child: Image(
                image: AssetImage('assets/images/logo_fluro.png'),
                width: 100.0,
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 25),
                child: GridView.count(
                  childAspectRatio: childRatio,
                  crossAxisCount: 2,
                  mainAxisSpacing: 5,
                  children: menuWidgets,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // helpers
  Widget menuButton(params) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: Container(
        height: 42.0,
        child: TextButton(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: Container(
                  height: 36,
                  child: Image.asset(
                    params['icon'],
                    fit: BoxFit.contain,
                  ),
                ),
              ),
              Text(
                params['title'],
                textAlign: TextAlign.center,
                style: const TextStyle(
                  color: Color(0xAA001133),
                ),
              )
            ],
          ),
          onPressed: () {
            tappedMenuButton(params);
          },
        ),
      ),
    );
  }

  // actions
  void tappedMenuButton(params) {
    String route =
        '${params['route']}?message=${params['message']}&color_hex=${params['theme']}';

    if (params['result'] != null) {
      route = '$route&result=${params['result']}';
    }

    Application.router
        .navigateTo(context, route,
            transition: params['transition'],
            transitionBuilder: params['transitionBuilder'],
            transitionDuration: params['transitionDuration'])
        .then((result) {
      if (params['type'] == 'pop-result') {
        Application.router.navigateTo(context, '/demo/func?message=$result');
      }
    });
  }
}
